/* 
  Animation 微动画  
  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
 */

/* css 滤镜 控制黑白底色gif的 */
.gif-black{  
  mix-blend-mode: screen;  
}
.gif-white{  
  mix-blend-mode: multiply; 
}


/* Animation css */
[class*=animation-] {
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both
}

.animation-fade {
    -webkit-animation-name: fade;
            animation-name: fade;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear
}

.animation-scale-up {
    -webkit-animation-name: scale-up;
            animation-name: scale-up
}

.animation-scale-down {
    -webkit-animation-name: scale-down;
            animation-name: scale-down
}

.animation-slide-top {
    -webkit-animation-name: slide-top;
            animation-name: slide-top
}

.animation-slide-bottom {
    -webkit-animation-name: slide-bottom;
            animation-name: slide-bottom
}

.animation-slide-left {
    -webkit-animation-name: slide-left;
            animation-name: slide-left
}

.animation-slide-right {
    -webkit-animation-name: slide-right;
            animation-name: slide-right
}

.animation-shake {
    -webkit-animation-name: shake;
            animation-name: shake
}

.animation-reverse {
    -webkit-animation-direction: reverse;
            animation-direction: reverse
}

@-webkit-keyframes fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes scale-up {
    0% {
        opacity: 0;
        -webkit-transform: scale(.2);
                transform: scale(.2)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1)
    }
}

@keyframes scale-up {
    0% {
        opacity: 0;
        -webkit-transform: scale(.2);
                transform: scale(.2)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1)
    }
}

@-webkit-keyframes scale-down {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.8);
                transform: scale(1.8)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1)
    }
}

@keyframes scale-down {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.8);
                transform: scale(1.8)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1)
    }
}

@-webkit-keyframes slide-top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }
}

@keyframes slide-top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }
}

@-webkit-keyframes slide-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20%);
                transform: translateY(20%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }
}

@keyframes slide-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20%);
                transform: translateY(20%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }
}

@-webkit-keyframes shake {

    0%,
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }

    10% {
        -webkit-transform: translateX(-9px);
                transform: translateX(-9px)
    }

    20% {
        -webkit-transform: translateX(8px);
                transform: translateX(8px)
    }

    30% {
        -webkit-transform: translateX(-7px);
                transform: translateX(-7px)
    }

    40% {
        -webkit-transform: translateX(6px);
                transform: translateX(6px)
    }

    50% {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
    }

    60% {
        -webkit-transform: translateX(4px);
                transform: translateX(4px)
    }

    70% {
        -webkit-transform: translateX(-3px);
                transform: translateX(-3px)
    }

    80% {
        -webkit-transform: translateX(2px);
                transform: translateX(2px)
    }

    90% {
        -webkit-transform: translateX(-1px);
                transform: translateX(-1px)
    }
}

@keyframes shake {

    0%,
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }

    10% {
        -webkit-transform: translateX(-9px);
                transform: translateX(-9px)
    }

    20% {
        -webkit-transform: translateX(8px);
                transform: translateX(8px)
    }

    30% {
        -webkit-transform: translateX(-7px);
                transform: translateX(-7px)
    }

    40% {
        -webkit-transform: translateX(6px);
                transform: translateX(6px)
    }

    50% {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
    }

    60% {
        -webkit-transform: translateX(4px);
                transform: translateX(4px)
    }

    70% {
        -webkit-transform: translateX(-3px);
                transform: translateX(-3px)
    }

    80% {
        -webkit-transform: translateX(2px);
                transform: translateX(2px)
    }

    90% {
        -webkit-transform: translateX(-1px);
                transform: translateX(-1px)
    }
}

@-webkit-keyframes slide-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }
}

@keyframes slide-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }
}

@-webkit-keyframes slide-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
                transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }
}

@keyframes slide-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
                transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }
}